<template>
  <div class="yxp-course" @click="bodyClick('body')">
    <div class="yxp-composition-top">
      <div class="back" id="yxp-train-back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">英语习得与切片训练</div>
      <div class="yxp-top-r">
        <span class="right-text-item" v-for="(item,i) in modelArr" :class="{active: model === i}" :key="'n' + i" @click="handleChangeModel(i)">{{item}}</span>
      </div>
    </div>
    <div class="yxp-scene-main">
      <div class="train-text"  id="yxp-train-screen" @click="handleScreen">
        <img src="@/assets/composition/train-text.png" />
      </div>
      <div class="main-box">
        <div class="main-box-item">
          <div class="train-translate" @click="handleShowEnglish">
              <img src="@/assets/composition/train-translate.png" v-if="isHide && !isEnglist"/>
              <img src="@/assets/composition/train-translate-sel.png" v-if="isHide && isEnglist"/>
          </div>
          <div class="content">
            <div class="content-wrap" v-show="isFish">
              <div :class="{'train-box': !isComplete}" class="scrolToMinView">
                <!-- <div class="train-translate" @click="handleShowEnglish">
                  <img src="@/assets/composition/train-translate.png" v-if="isHide && !isEnglist"/>
                  <img src="@/assets/composition/train-translate-sel.png" v-if="isHide && isEnglist"/>
                </div> -->
              <div class="scene-content-list">
              <p class="content-zh" v-if="zhWord !== ''">{{zhWord}}</p>
              <p class="content-en" v-if="isEnglist || isComplete" @click="handlePlayEn">{{enInit}}<img src="@/assets/composition/audio-play.png" /></p>
              <div class="content-fill" v-if="!isEnglist && !isComplete">
                <div class="content-fill-item">
                  <span class="fill-item" v-for="(item,i) in dotArr" :key="'m' + i" :data-s="item.pos">
                    <template v-if="item.pos === 4">
                      <em :class="{posL: item.pos === 4}">{{item.dot}}</em>{{item.name}}<em :class="{posR1: item.pos1}">{{item.dot1}}</em>
                    </template>
                    <template v-else>
                      {{item.name}}<em :class="{posL: item.pos === 1, posR: item.pos === 2, posR1: item.pos === 3}">{{item.dot}}</em>
                    </template>
                  </span>
                </div>
                <div class="content-fill-item word-fill">
                  <span class="fill-item word-item" v-for="(item,i) in enSel" :key="'k' + i" @click="handleDown(item,i)">{{item.name}}</span>
                </div>
              </div>
              <div :yxp_attr="isAnimation ? 'disable':''" id="yxp:ping" class="content-sel" :class="{'fill-hidden': isEnglist}" v-if="enWord.length > 0 && !isComplete" :data-s="enWord.length">
                <span v-for="(item,i) in enWord" :key="'s' + i" :class="{active: item.isClick}" style="display:inline-block">
                <template v-if="model === 1">
                  <span  @click.stop="handleFill(item,i)">{{ item.name }}</span>
                </template>
                <template v-else>
                    <a-popover
                      transitionName=""
                      :visible="visibleKey === `${i}-m`"
                      overlayClassName="lookup-popover"
                      placement="bottom"
                      :destroyTooltipOnHide="true"
                      trigger="click"
                    >
                    <span @click.stop="handleFill(item,i,`${i}-m`)">{{ item.name }}</span>
                    <div slot="content">
                      <div class="lookup-content">
                        <div class="title">
                          {{ prototype_word || select_word }}
                          <img
                            v-show="prototype_word"
                            class="icon-img"
                            @click="handlePlay"
                            src="~assets/reverse/audio-play1.png"
                            alt=""
                          />
                        </div>
                        <div class="translate">
                          {{ translates || "未找到该生词" }}
                        </div>
                        <div class="btn-group">
                          <a :disabled="!prototype_word" @click="handleAdd(item.name)"
                            ><img
                              class="icon-img"
                              src="~assets/reverse/add1.png"
                              alt=""
                            />添加生词</a
                          >
                          <a @click="handleDetail"
                            ><img
                              class="icon-img"
                              src="~assets/reverse/detail1.png"
                              alt=""
                            />单词详解</a
                          >
                        </div>
                      </div>
                    </div>
                  </a-popover>
                </template>
                </span>

              </div>
              <!-- <div class="content-complete" v-if="isComplete">
              <img src="@/assets/composition/correct-icon.png" class="complete-icon" />
              <p class="text">拼写正确</p>
            </div> -->
            </div>
            </div>
            <div class="reload-btn" v-if="!isComplete">
              <div class="check" v-if="checkBtn && model === 1"  @click="handleCheckWord">CHECK</div>
              <div class="reload" :class="{pos: checkBtn}" @click="handleReload" v-if="isReload && model === 1">重新拼句</div>
            </div>
            <div class="complete-btn" v-if="isComplete">
              <!-- <p class="write">请听句子并抄写</p> -->
              <img src="@/assets/composition/suc-icon.png" class="complete-icon" />
              <span class="text">拼写正确，请听句子并抄写</span>
            </div>
        </div>

          </div>
        </div>
      </div>
    </div>
    <!--fenye-->
    <div class="scene">
        <div class="scene-bottom">
          <span class="again" v-if="isComplete" @click="handleAgain">AGAIN</span>
          <span class="title">词句切片训练</span>
          <div class="page">
            <img src="@/assets/word/prev.png" v-if="pageIndex > 1" @click="handlePrev"/>
            <span>{{pageIndex}}/{{zhText.length}}</span>
            <img src="@/assets/word/no-next.png" v-if="pageIndex < zhText.length" @click="handleNext" class="next"/>
            <img src="@/assets/composition/complete-icon.png" v-if="pageIndex === zhText.length" class="next" @click="handleNextModel"/>
          </div>
        </div>
    </div>
    <div class="mark" v-if="isScreen || isDetail || isEn || reloadPop"  @click="handleReduce"></div>
    <div class="yxp-scene-screen" :class="{screen: isScreen, hides: isSmall}">
      <div class="screen-box">
        <div class="close" @click="handleReduce"></div>
      <div class="yxp-scene-screen-item">
        <div class="yxp-screen-box scrolToMinView">
        <template>
          <template v-if="articleType === 1 || articleType === 5">
            <span v-html="zhHead"  :style="{display: 'block',color: '#333'}"></span>
            <span v-for="(item,i) in zhArr" :key="'z' + i" v-html="item" :class="{on: section === i}" @click="handleSelzh(i)"></span>
            <span  v-html="zhEnd" :style="{display: 'block',float: 'right',overflow: 'hidden',color: '#333'}"></span>
          </template>
          <template v-else-if="articleType === 2">
            <span v-html="zhHead" :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
            <span v-for="(item,i) in zhArr" :key="'z' + i" :class="{on: section === i}"  @click="handleSelzh(i)"  v-html="item"></span>
            <span v-html="zhEnd"  :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
          </template>
          <template v-else-if="articleType === 3">
            <span  v-html="zhHead" :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
            <span v-for="(item,i) in zhArr" :key="'z' + i" :class="{on: section === i}"  @click="handleSelzh(i)" v-html="item"></span>
          </template>
          <template v-else-if="articleType === 4">
            <span  v-html="zhHead" :style="{display: 'block',color: '#333'}"></span>
            <span v-for="(item,i) in zhArr" :key="'z' + i" :class="{on: section === i}"  @click="handleSelzh(i)" v-html="item"></span>
          </template>
          <template v-else>
            <span v-for="(item,i) in zhArr" :key="'z' + i" :class="{on: section === i}"  @click="handleSelzh(i)" v-html="item"></span>
          </template>
        </template>
        </div>
      </div>
      <div class="yxp-scene-screen-item">
        <div class="yxp-screen-box scrolToMinView">
        <template>
          <template v-if="articleType === 1 || articleType === 5">
            <span v-html="enHead" :style="{display: 'block',color: '#333'}"></span>
            <template v-for="(item,i) in enArr">
              <span :key="'e' + i" :class="{on: section === i}" v-if="i < totalNum && item.isShow" @click="handleSelen(i)" v-html="item.name"></span>
            </template>
            <span v-html="enEnd"  :style="{display: 'block',float: 'right',marginTop: '30px',overflow: 'hidden',color: '#333'}"></span>
          </template>
          <template v-else-if="articleType === 2">
            <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
            <template v-for="(item,i) in enArr">
              <span :key="'e' + i" :class="{on: section === i}" v-if="i < totalNum && item.isShow" @click="handleSelen(i)" v-html="item.name"></span>
            </template>
            <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
          </template>
          <template v-else-if="articleType === 3">
            <span  v-html="enHead" :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
            <template v-for="(item,i) in enArr">
              <span :key="'e' + i" :class="{on: section === i}" v-if="i < totalNum && item.isShow" @click="handleSelen(i)" v-html="item.name"></span>
            </template>
          </template>
          <template v-else-if="articleType === 4">
            <span  v-html="enHead" :style="{display: 'block',color: '#333'}"></span>
            <template v-for="(item,i) in enArr">
              <span :key="'e' + i" :class="{on: section === i}" v-if="i < totalNum && item.isShow" @click="handleSelen(i)" v-html="item.name"></span>
            </template>
          </template>
          <template v-else>
            <template v-for="(item,i) in enArr">
            <span :key="'e' + i"  :class="{on: section === i}" v-if="i < totalNum && item.isShow" @click="handleSelen(i)" v-html="item.name"></span>
            </template>
          </template>
        </template>
        </div>
      </div>
      </div>
    </div>
    <Translates v-if="word !== ''" :isDetail="isDetail" :word="word" @translate="handleCloseDetail"/>
    <ScenePop :title="popTitle" :isEn="isEn" type="2" :id="id" :courseId="courseId"  @closePop="handleClosePop" />
    <BackTips title="是否退出学习？" :isBack="isBack" :courseId="courseId" :courseType="course_type" type="5" @close="handleClosed"/>
    <message :isReload="reloadPop" @reloadWord="handleReloadWord" />
    <audio :src="project_voice" ref="audio" />
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import { Popover } from "ant-design-vue";
import Translates from '@/components/Translates.vue'
import ScenePop from '../components/ScenePop.vue'
import BackTips from '../components/BackTips.vue'
import message from '../components/message.vue'
import Timetips from '@/components/Timetips.vue'
import storage from '@/utils/storage.js'
import { addWord, randomArr, searchWord } from '@/services/composition.js'
import { randWord } from '@/utils/rand.js'
import { mapMutations } from "vuex";
import $ from "jquery";
export default {
  name: 'breakTrain',
  components: {
    Translates,
    ScenePop,
    BackTips,
    message,
    APopover: Popover,
    Timetips
  },
  data () {
    return {
      isEnglist: false,
      isComplete: false, // 是否完成拼句
      isScreen: false, // 全屏
      isSmall: false, // 小屏
      isCheck: false,
      isReload: true,
      reloadPop: false,
      isHide: true, // 隐藏小灯泡
      isAgain: false, // again
      isBack: false,
      modelArr: ['查词模式', '句子模式'],
      model: 1,
      content: '',
      zhText: [],
      zhHead:'',
      zhEnd: '',
      enText: [],
      enHead: '',
      enEnd: '',
      zhArr: [],
      enArr: [],
      dotArr: [],
      zhOne: [],
      enAudio: [],
      audio: null,
      zhWord: '',
      enWord: [],
      enSentent: [],
      resetArr: [],
      enInit: '',
      enSel: [],
      completeArr: [], // 拼对的句子
      pageIndex: 1,
      iNow: 0,
      iStep: 0,
      totalNum: -1,
      section: -1,
      isDetail: false,
      word: '',
      popTitle: '开始格式塔复述训练吧~',
      isEn: false,
      courseId: '',
      id: 0,
      course_type: 0,
      wordType: 0, // 是否体验词库
      translates: '',
      project_voice: '',
      prototype_word: '',
      select_word:'',
      articleType: 1,
      isAnimation: false,
      isClick: false,
      activeWord: '',
      isFish: false, // 是否random接口请求完成
      visibleKey: -1
    }
  },
  created () {
    if (this.$route.query.id) {
      let { courseId, id, course_type } = this.$route.query
      this.courseId = +courseId
      this.id = +id
      this.course_type = +course_type
    }
    let data = storage.get('sceneData')
    if (data) {
      this.content = data.content
      this.articleType = data.type
      let zhText = data.sentence_translation
      let enText = data.sentence
      this.enAudio = data.single_voice
      if (this.articleType === 1 || this.articleType === 5 || this.articleType === 2) {
        this.zhHead = zhText.splice(0,1).join('').replace('##','')
        this.zhEnd = zhText.pop()
        this.enHead = enText.splice(0,1).join('').replace('##','')
        this.enEnd = enText.pop()
        if (this.enEnd.indexOf('##')) {
          this.enEnd = this.enEnd.replace('##','<br/>')
        }
        this.enAudio.splice(0,1)
        this.enAudio.pop()
      } else if (this.articleType === 3 || this.articleType === 4) {
        this.zhHead = zhText.splice(0,1).join('').replace('##','')
        this.enHead = enText.splice(0,1).join('').replace('##','')
        this.enAudio.splice(0,1)
      }
      this.id = data.id
      this.zhText = zhText
      this.enText = enText
      let zhArr = []
      let enArr = []
      zhText.map(item =>{
        if (item.indexOf('&&') !== -1 || item.indexOf('##') !== -1) {
          let val = item.replace('&&', '<label style="width:45px;height:28px;margin-bottom:-6px;background-color:white;display:inline-block;"></label>').replace('##','<br>')
          zhArr.push(val)
        } else {
          zhArr.push(item)
        }

      })
      enText.map(item =>{
        let obj = {}
        if (item.indexOf('&&') !== -1 || item.indexOf('##') !== -1) {
          let val = item.replace('&&', '<label style="width:26px;height:28px;margin-bottom:-6px;background-color:white;display:inline-block;"></label>').replace('##','<br>')
          obj.name = val
          obj.isShow = false
          enArr.push(obj)
        } else {
          obj.name = item
          obj.isShow = false
          enArr.push(obj)
        }

      })
      this.zhArr = zhArr
      this.enArr = enArr
      this.init()
    }
   // this.listenerFunction();
    document.addEventListener('scroll', this.bodyClick, true)
    
  },
  beforeDestroy() {
    document.removeEventListener('scroll', this.bodyClick, true)
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  computed: {
    checkBtn () {
      return this.iStep === this.enWord.length
    }
  },
  mounted () {
    // let a = 'If you want to join, you can send your photos to intlphotoshow@gmschool. com. '
    // alert(a.replace(/\. /, '.'))
    this.audio = this.$refs.audio
  //  document.getElementById("app").addEventListener("click",this.resetWord, true);
  },
  // beforeDestroy () {
  //     document.removeEventListener("scroll", this.listenerFunction);
  //     document.getElementById("app").removeEventListener("click",this.resetWord);
  // },
  methods: {
    // listenerFunction() {
    //     document.addEventListener('scroll', this.handleScroll, true);
    // },
    // handleScroll() {
    //   this.resetWord()
    // },
    // resetWord() {
    //   console.log(11111)
    //    if(this.enWord && this.enWord.length > 0) {
    //     let __enWord = [...this.enWord]
    //     __enWord.map(item=>{
    //       this.activeWord = -1
    //       item['isShow'] = false
    //     })
    //     this.enWord = __enWord
    //     console.log(this.enWord)
    //   }
    // },
    ...mapMutations(["setTranslateModal"]),
    scrollRmPop() {
      if (!window[`bs:event:scroll:close`]) {
          $(".ant-popover").empty();
          $('.ant-popover-open').removeClass('ant-popover-open')
      }
    },
    bodyClick(e) {
      if (e === 'body') {
        this.visibleKey = -1
      }
      if (!window[`bs:event:scroll:close`]) {
        this.visibleKey = -1
      }
    },
    init () {
      // this.pageIndex = 5
      this.enText[this.pageIndex - 1] = this.enText[this.pageIndex - 1].replace(/\. /gi, '.')
      this.zhWord = this.zhText[this.pageIndex - 1].replace(/[#|&]/g, '')
      let enWord = this.enText[this.pageIndex - 1].replace(/[#|&]/g, '').replace(/\.(\s+)/, '. ').replace(/\s+/g, ' ')
      let enArr = enWord.split(' ')
      this.zhOne = this.zhWord.split(' ')
      let arr = []
      let sel = []
      let dotArr = []
      this.resetArr = []
      this.iNow = 0
      this.iStep = 0
      enArr.map((item,i) => {
        if  (item !== ''){
         // item = item.replace(/(^\s*)|(\s*$)/g, '')
        let obj = {}
        let obj1 = {}
        let obj2 = {}
        let name = ''
        let dot = ''
        let dot1 = ''
        let pos = 0
        let pos1 = 0
        let n = 0
          let n1 = 0
        let reg = /^([~!?<>@#$%^&*()+=:“”.,"])|([~!?<>@#$%^&*()+=:“”.,"])$/g
        // let regMail = /^([a-zA-Z]|[0-9])(\w)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
        if (reg.test(item)) {
          let symbol = item.match(reg)
          console.log(symbol.length + '==============')
          console.log(333333, symbol)
          // if (symbol.indexOf('@') !== -1) {
          //   symbol.splice(symbol.indexOf('@'), 1)
          // }
          if (symbol.length === 1) {
            n = item.lastIndexOf(symbol[0])
            if (n === 0) {
              name = item.substr(n + 1, item.length)
              dot = item.substr(n,1)
              pos = 1
            } else if (n > 0 && n < item.length - 1) {
              name = item.substring(0, n)
              dot = item.substr(n,item.length)
              pos = 3
            } else {
              name = item.substring(0, item.length - 1)
              dot = item.substr(item.length-1,1)
              pos = 2
            }
          } else {
            // if (symbol.indexOf('@') > -1) {
            //   if (symbol.indexOf('@') > -1 && symbol.length === 2) {
            //     return
            //   } else {
            //     name = item.substring(0, item.length - 1)
            //     dot = item.substr(item.length-1,1)
            //     pos = 2
            //   }
            // } else {
              console.log('多' + item )
              n = item.lastIndexOf(symbol[0])
              n1 = item.lastIndexOf(symbol[1])
              console.log(n + '位置')
              if (n > 0) {
                name = item.substring(0, n)
                dot = item.substr(n,item.length)
                pos = 3
              } else {
                name = item.substring(1, n1)
                dot = item.substr(0,1)
                dot1 = item.substr(item.length-1,1)
                pos = 4
                pos1 = 5
              }
           // }
          }
        } else {
          name = item
          dot = ''
          pos = 0
        }
        obj.name = name
        obj.dot = dot
        obj.isShow = false
        obj.isClick = false
        obj.num = -1
        obj.isNum = 0
        obj1.name = ''
        obj1.num = -1
        // obj2.name = name
        obj2.dot = dot
        obj2.dot1 = dot1
        obj2.name = ''
        obj2.pos = pos
        obj2.pos1 = pos1
        arr.push(obj)
        sel.push(obj1)
        dotArr.push(obj2)
        }
      })
      console.log(arr)
      let randArr = randWord(arr)
      this.handleRandom(randArr).then((r) => {
        this.enSel = sel
        this.enInit = enWord
        this.dotArr = dotArr
        this.isFish = true
      })
    },
    async handleRandom (arr) {
      this.$lay.show()
      let params = {
        type: JSON.stringify(arr)
      }
      let data = await randomArr(params)
      if (data.code === 1) {
        this.$lay.hide()
        this.enWord = JSON.parse(data.data)
        this.$nextTick(() => {
          console.log(111434)
          this.isClick = true
        })
        console.log(this.enWord)
      } else if (data.code === 10001 || data.code === '10001') {
        this.$lay.hide()
        this.$toast('token失效，请重新登录')
      } else {
        this.$lay.hide()
        this.$toast(data.info)
      }
    },
    async handleSearchWord (word) {
      this.visibleKey = '-1'
      let data = await searchWord({ word: word})
      if (data.code === 1) {
        let { translate, project_voice, prototype_word, select_word } = data.data
        this.translates = translate
        this.project_voice = project_voice
        this.prototype_word = prototype_word
        this.select_word = select_word
        // this.visibles[i] = !this.visibles[i];
        // this.viLock = false;
      //   let item = this.enWord[i]
      //   console.log(item)
      // //  let item = obj.data
      //   // let isShow = item.isShow ? false : true
      //   // this.$set(item, 'isShow', isShow)
      //   console.log(item.isShow + '))))))))')
      //   if(this.activeWord != word) {
      //       this.activeWord = word
      //       let num = item.isNum
      //       num++
      //       this.$set(item, 'isShow', true)
      //       // item.isShow = true
      //   } else {
      //     console.log(8980099 + '----' + item.isShow)
      //       this.activeWord = '-1'
      //       let num = item.isNum
      //       num++
      //       // let isShow = item.isShow ? false : true
      //       this.$set(item, 'isShow', false)
      //       console.log(item)
      //       // item.isShow = false
      //   }
        //this.$set(item, 'isShow', item)
      } else {
        this.activeWord = '-1'
      }
      return data
    },
    async handleFill (item,i,n) {
      console.log(this.iNow + '****' + this.iStep + '****----')
      if (this.isAnimation || !this.isClick) {
        console.log('未渲染完')
        return
      }
      if (this.model == 0) {
        
      //   this.outPopClick(n);
      // this.lastvi = n;
      // if (!item.name || this.viLock) return;
      // this.viLock = true;
      if (this.visibleKey === n) {
        this.visibleKey = '-1'
        return
      }
      await this.handleSearchWord(item.name)
      this.visibleKey = n
        // console.log('查词')
        // let detail = this.$refs.detail
        // console.log(detail)
        // this.enWord.map((item,index) => {
        //   if (i !== index) {
        //     item.isShow = false
        //     console.log(5555555555555)
        //   }
        // })
        // await this.handleSearchWord(item.name,i)
        
        // let obj = this.enWord[i]
        // console.log(this.activeWord + ')_)_______' + item.isShow + '-----' + item.isNum)
        // let isShow = false
        // if (this.activeWord !== '' && this.activeWord !== '-1') {
        //   isShow = true
        // } else if (this.activeWord === '') {
        //   isShow = true
        // } else {
        //   isShow = false
        // }
        // this.$set(obj, 'isShow', isShow)
      } else {
        if (this.isEnglist) {
          this.isEnglist = false
        }
        if (!item.isClick) {
          if (this.resetArr.length > 0) {
            let resetArr = this.resetArr.sort((a,b) => {
              return a - b
            })
            this.resetArr = resetArr
            console.log(this.resetArr)
            this.iNow = this.resetArr[0]
          }
          let obj = this.enSel[this.iNow]
          let obj1 = this.enWord[i]
          let obj2 = this.dotArr[this.iNow]
          let isClick = item.isClick ? false : true
          this.$set(obj1, 'isClick', isClick)
          this.$set(obj1, 'num', this.iNow)
          this.$set(obj, 'name', item.name)
          this.$set(obj, 'num', i)
          this.$set(obj2, 'name', item.name)
          if (this.resetArr.length > 0) {
            this.resetArr.splice(0,1)
          }
          this.iStep++
          this.iNow = this.iStep
          console.log(this.iStep + '*******')
        } else {
          this.iNow = item.num
          let obj = this.enSel[this.iNow]
          let obj1 = this.enWord[i]
           let obj2 = this.dotArr[this.iNow]
          let isClick = item.isClick ? false : true
          if (this.resetArr.indexOf(item.num) === -1) {
            this.resetArr.push(item.num)
          }
          // if (this.enSentent.indexOf(item.name) > -1) {
          //   let index = this.enSentent.findIndex(elem => elem === item.name)
          //   this.enSentent.splice(index,1)
          // }
          this.$set(obj1, 'isClick', isClick)
          this.$set(obj1, 'num', -1)
          this.$set(obj, 'name', '')
          this.$set(obj, 'num', -1)
          this.$set(obj2, 'name', '')
          this.iStep--
        }
        // if (this.iStep === this.enWord.length) {
        //   this.isCheck = true
        // }
      }

    },
    handleDown (item,i) {
      console.log(this.resetArr)
      if (item.name === '' || !this.isClick) {
        console.log('未渲染完呢')
        return
      }
      if (this.resetArr.indexOf(i) === -1) {
         this.resetArr.push(i)
      }
      let index = this.enWord.findIndex((elem,i) => i === item.num)
      // console.log(index)
      // const dom = document.getElementsByClassName('word-item')
      // dom[i].style.transform = 'translateY(200px)'
      // dom[i].style.transition = 'all .3s ease-out ' + i * .05 + 's'
      let obj = item
      item.name = ''
      this.$set(this.enSel,i,obj)
      this.$set(this.enWord[index],'isClick',false)
      this.$set(this.enWord[index],'num',-1)
      this.$set(this.dotArr[i],'name','')

      this.iStep--
      this.iNow = this.iStep
      // if (this.iStep < this.enWord.length) {
      //     this.isCheck = true
      //   }
      // setTimeout(() => {
      //   dom[i].style.transform = 'translateY(0)'
      //   dom[i].style.transition = 'all 0s ease'
      // }, 500)
    },
    handleShowEnglish () {
      this.isEnglist = !this.isEnglist
    },
    handlePrev () {
      this.audio && this.audio.pause()
      this.project_voice = ''
      this.isClick = false
      this.pageIndex--
      this.zhWord = this.zhText[this.pageIndex - 1].replace(/[#|&]/g, '')
      let enWord = this.enText[this.pageIndex - 1].replace(/[#|&]/g, '').replace(/\.(\s*)/, '.')
      this.enInit = enWord
    //  this.init()
      this.model = 1
      this.isComplete = true
      this.isCheck = false
      this.isReload = false
      this.isHide = false
    },
    handleNext () {
      if (this.completeArr.indexOf(this.pageIndex + 1) !== -1) {
        this.enSel.map(item => {
          this.$set(item, 'name', '')
        })
        console.log(this.enSel)
        console.log("&&&&&&&&&&&&&&&&&&&&&&&&++++++++++++++++=")
        this.audio && this.audio.pause()
        this.project_voice = ''
        setTimeout(() => {
          this.isClick = false
          this.model = 1
          this.pageIndex++
          this.isComplete = true
          this.isCheck = false
          this.isReload = false
          this.isHide = false
          this.zhWord = this.zhText[this.pageIndex - 1].replace(/[#|&]/g, '')
          let enWord = this.enText[this.pageIndex - 1].replace(/[#|&]/g, '').replace(/\.(\s*)/, '.')
          this.enInit = enWord
         // this.init()
        }, 10)
      } else {
        if (this.course_type === 1 && !this.isAgain) {
          if (!this.isComplete) {
            this.$toast('当前句子还没通关')
            return
          }
        }
        this.isFish = false
        this.enSel.map(item => {
          this.$set(item, 'name', '')
        })
        this.isClick = false
        if (this.course_type === 0) {
          if (this.completeArr.indexOf(this.pageIndex) === -1) {
            this.completeArr.push(this.pageIndex)
          }
          this.totalNum = this.pageIndex
        }
        this.model = 1
        this.$set(this.enArr[this.pageIndex - 1], 'isShow', true)
        this.section = this.pageIndex - 1
        this.isComplete = false
        this.isEnglist = false
        this.isReload = true
        this.isCheck = false
        this.isHide = true
        this.isAgain = false
        this.pageIndex++
        this.init()
        this.iNow = 0
        this.iStep = 0
        this.audio && this.audio.pause()
        this.project_voice = ''
      }
    },
    handleBack () {
      this.isBack = true
    },
    handleScreen () {
      this.isScreen = true
      this.isSmall = false
    },
    handleReduce () {
      this.isScreen = false
      this.isSmall = true
    },
    handleSelzh (i) {
      if (i > this.totalNum - 1) {
        this.$toast('此句还未解锁')
        return
      } else {
        this.section = i
      }
    },
    handleSelen (i) {
      this.section = i
    },
    handleReload (e) {
      setTimeout(() => {
        this.reloadPop = true
      }, e.isTrusted ? 200 : 0)
    },
    handleReloadWord (val) {
      console.log(val)
      if (val) {
        this.reloadPop = false
        this.isAnimation = true
        this.isEnglist = false
        this.isCheck = false
        this.resetArr = []
        this.initData()
      } else {
        this.reloadPop = val
      }
      
    },
    handleCheckWord () {
      let ensentent = []
      this.dotArr.map(item =>{
        let name = ''
        if (item.dot !== '') {
          if (item.pos === 1) {
            name = item.dot + item.name
          } else if (item.pos === 4) {
            name = item.dot + item.name + item.dot1
          } else {
            name = item.name + item.dot
          }

        } else {
          name = item.name
        }
        ensentent.push(name)
      })
      console.log(ensentent.join(' '))
      console.log(this.enInit.replace(/^\s+|\s+$/g,""))
      if (this.enInit.replace(/^\s+|\s+$/g,"") === ensentent.join(' ')) {
        this.isComplete = true
        this.isEnglist = false
        this.isCheck = false
        this.isReload = false
        this.isHide = false
        this.section++
        this.iNow = 0
        this.iStep = 0
        this.totalNum = this.pageIndex
        this.$set(this.enArr[this.pageIndex - 1], 'isShow', true)
        if (this.completeArr.indexOf(this.pageIndex) === -1) {
          this.completeArr.push(this.pageIndex)
        }
      } else {
        this.$toast('拼错了哦，重新拼一下吧~')
        this.isCheck = false
        this.isAnimation = true
        this.initData()
      }
    },
    initData () {
      this.$lay.show()
      const dom = document.getElementsByClassName('word-item')
      return new Promise(resolve => {
        for (let i = 0; i < dom.length; i++) {
          let item = this.enSel[i]
          if (item.name !== '') {
            dom[i].style.transform = 'translateY(200px)'
            dom[i].style.transition = 'all .3s ease-out ' + i * .02 + 's'
          }
        }
        resolve()
      }).then(() => {
        console.log("测试结果")
       // setTimeout(() => {
          let word = JSON.parse(JSON.stringify(this.enWord))
          this.handleRandom(randWord(word)).then((r) => {
        this.enSentent = []
        this.iStep = 0
        this.iNow = 0
      //  // setTimeout(() => {
          let dotArr = this.dotArr
          let enSel = this.enSel
          dotArr.map(item => {
            item.name = ''
          })
          enSel.map(item => {
            item.name = ''
          })
          let enWord = this.enWord
          enWord.map(item => {
            item.isClick = false
            item.num = -1
          })
          this.enWord = enWord
          this.enSel = enSel
          
          this.isAnimation = false
          for (let i = 0; i < dom.length; i++) {
            dom[i].style.transform = 'translateY(0)'
            dom[i].style.transition = 'all 0s ease'
          }
          console.log(this.enWord)
         // }, 500)
        })
       // })
      })
    },
    handleAgain () {
      this.isClick = false
      this.isFish = false
      this.init()
      if (this.model === 1) {
        this.isReload = true
      }
      this.isComplete = false
      this.isEnglist = false
      this.isHide = true
      this.isAgain = true
      // console.log(this.enInit)
      // let word = JSON.parse(JSON.stringify(this.enWord))
      // this.handleRandom(randWord(word)).then((r) => {
      //   let enWord = this.enWord
      //   let dotArr = this.dotArr
      //   let enSel = this.enSel
      //   dotArr.map(item => {
      //     item.name = ''
      //   })
      //   enSel.map(item => {
      //     item.name = ''
      //   })
      //   enWord.map(item => {
      //     item.isClick = false
      //     item.isShow= false
      //     item.num = -1
      //   })
      //   this.enWord = enWord
      //   this.dotArr = dotArr
      //   this.enSel = enSel
      //   this.iNow = 0
      //   this.iStep = 0
      //   this.isClick = true
      //   this.isFish = true
      // })
      
    },
    handleChangeModel (type) {
      this.model = type
      if (!this.isComplete) {
        this.isReload = true
      } else {
        this.isReload = false
      }
      if (type === 1) {
        // let enWord = this.enWord
        console.log(23333)
        console.log(this.enWord)
        this.enWord.map(item => {
          this.$set(item, 'isShow', false)
        })
        console.log(this.enWord)
      }
    },
    handleAdd (word) {
      let params = {
        prototype_word: this.prototype_word,
        select_word: word,
        question_type: 4,
        is_diff: '0'
      }
      addWord(params).then(res => {
        if (res.code === 1) {
          this.$toast('添加生词成功')
          this.enWord.map(item => {
            item.isShow = false
          })
        } else {
          this.$toast(res.info)
        }
      })
    },
    handleDetail () {
      this.setTranslateModal({
        visible: true,
        word: this.select_word,
      });
      document.getElementById("app").click();
      // this.isDetail = true
      // this.word = this.select_word
    },
    handleCloseDetail (val) {
      this.isDetail = val.isDetail
      this.word = val.word
    },
    handleClosed (val) {
      this.isBack = val
    },
    handleClosePop (val) {
      this.isEn = val
    },
    handleNextModel () {
      this.totalNum = this.pageIndex
      this.section = this.pageIndex - 1
      this.$set(this.enArr[this.section], 'isShow', true)
      console.log(this.totalNum + '****' + this.section)
      this.isEn = true
    },
    // 播放读音
    handlePlay () {
      setTimeout(() => {
        this.audio.play()
      },10)
    },
    handleWordClose () {
      this.enWord.map(item => {
        item.isShow = false
      })
    },
    handlePlayEn () {
      this.project_voice = this.enAudio[this.pageIndex - 1]
      setTimeout(() => {
        this.audio.play()
      },10)
    }
  }
}
</script>
<style lang='less' scoped>
.content-wrap {
  padding: 0 !important;
  overflow: hidden !important;
}
 .screen {
     width: 80%;
     height: 80%;
  }
.train-box {
  position: relative;
  height: calc(100% - 68px);
  overflow: auto;
}
.train-box1 {
  height: calc(100% - 48px);
  overflow: auto;
}
.train-text {
  position: absolute;
  left: calc((100% - 800px) / 2 - 60px);
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  z-index: 10;
  img {
    width: 23px;
    height: 23px;
    margin-top: 13px;
  }
}
.train-translate {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height:40px;
  cursor: pointer;
  z-index: 3;
    img {
      width: 40px;
      height: 40px;
      cursor: pointer;
    }
  }
.content-complete {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 90px;
  margin-bottom: 90px;
  .complete-icon {
    width: 40px;
    height: 40px;
  }
  .text {
    font-size: 26px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 35px;
    color: #27BFA3;
    margin-left: 10px;
  }
}
.scene-content-list {
  text-align: left;
  padding: 32px  60px 0 80px;
  .content-zh {
        font-size:24px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color: #333;
      }
      .content-en {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333;
        margin-top: 30px;
        img {
          display: inline-block;
          width: 24px;
          height: 22px;
          margin-left: 2px;
          vertical-align: middle;
        }
      }
      .content-fill {
        position: relative;
        margin-top: 10px;
        .word-fill {
          position: absolute;
          left: 0;
          top: 0px;

          span {
            color: #27BFA3;
            border: none;
            text-align: center;
          }
        }
        &-item {
          span {
            position: relative;
            display: inline-block;
            min-width: 80px;
            padding: 0 5px;
            height: 50px;
            line-height: 65px;
            text-align: center;
            vertical-align: bottom;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #fff;
            border-bottom: 1px solid #C6C6C6;
            margin-right: 20px;
            cursor: pointer;
            // background: #ff0000;
            .posL {
              left: -25px;
            }
            .posR {
              right: -8px;
            }
            .posR1 {
              right: -28px;
            }
            em {
              position: absolute;
              top: 0;
              color: #27BFA3;
              margin-left: 5px;
            }
          }
        }

      }
      .fill-hidden {
        padding-top: 70px;
      }
      .content-sel {
        margin-top:40px;
        .active {
          .ant-popover-open {
            color: #27BFA3 !important;
            background-color: #DFF7F3;
            &:hover {
              background-color: #DFF7F3;
            }
          }
          span {
            color: #fff !important;
            background-color: #D0D0D0;
            &:hover {
              background-color: #D0D0D0;
            }
          }
        }
       
        .ant-popover-open {
          color: #27BFA3 !important;
          background-color: #DFF7F3;
          &:hover {
            background-color: #DFF7F3;
          }
        }
        
        span {
          span {
            position: relative;
            display: inline-block;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;
            background: #27BFA3;
            border-radius: 6px;
            padding: 6px 20px;
            margin-right: 20px;
            margin-bottom: 20px;
            cursor: pointer;
            &:hover {
              background-color: #18A288;
            }
          }

        }
        .detail {
          position: absolute;
          left: 50%;
          top: 60px;
          transform: translateX(-50%);
          width: 280px;
          height: 163px;
          background: #27BFA3;
          border-radius: 6px;
          padding-left: 20px;
          padding-right:20px;
          z-index: 1000;
          &::after {
            position: absolute;
            left: 50%;
            top: -20px;
            transform: translateX(-50%);
            display: block;
            content: '';
            width: 0;
            height: 0;
            border-top: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 12px solid #27BFA3;
            border-left: 12px solid transparent;
          }
          .word-icon {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 14px;
            height: 14px;
          }
          .en {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size:24px;
            font-family:Microsoft YaHei;
            font-weight:bold;
            color: #fff;
            margin-top: 25px;
            img {
              width: 14px;
              height: 11px;
              margin-left: 15px;
            }
          }
          .zh {
            font-size:16px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color: #fff;
            margin-top: 10px;
          }
          .btn {
            display: flex;
            justify-content: space-between;
            align-self: center;
            margin-top: 20px;
            .grey {
              color: #60CEB9 !important;
              border-color: #60CEB9 !important;
            }
            &-item {
              width:120px;
              height:33px;
              line-height: 33px;
              font-size:14px;
              font-family:Microsoft YaHei;
              font-weight:400;
              color: #99E2D4;
              border:1px solid rgba(153,226,212,1);
              border-radius:6px;
              img {
                display: inline-block;
                vertical-align: middle;
                width: 16px;
                height: 16px;
                margin-left: 10px;
                margin-right: 10px;
              }
              &:first-child {
                margin-right: 20px;
              }
            }
          }
        }
      }
    }
.reload-btn {
  position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 80px;
      line-height: 80px;
      background: #fff;
      text-align: center;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #27BFA3;
      .check {
        width: 300px;
        height: 50px;
        line-height: 50px;
        color: #27BFA3;
        border: 1px solid #27BFA3;
        border-radius: 25px;
        cursor: pointer;
      }
      .pos {
        position: absolute;
        right: 98px;
        top: 0;
      }
      .reload {
        color: #27BFA3;
        font-size: 20px;
      }
      
    }
.complete-btn {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 28px;
    height: 28px;
    margin-right: 7px;
  }
  .text {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 29px;
    color: #27BFA3;
  }
}
.scene-bottom {
  position: relative;
    width: 800px;
    text-align: center;
    margin: 0 auto;
    .again {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 150px;
      height: 40px;
      line-height: 40px;
      font-size:20px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color: #27BFA3;
      border:2px solid rgba(39,191,163,1);
      border-radius: 20px;
      cursor: pointer;
    }
    .title {
      font-size:20px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color: #27BFA3;
    }
    .page {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        cursor: pointer;
      }
      .next {
        margin-left: 0 !important;
      }
      span {
        font-size:20px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color: #27BFA3;
        margin-left: 20px;
        margin-right: 20px;
      }
    }
  }
.yxp-composition-top {
    .active {
      color: #27BFA3;
    }
    .yxp-top-r {
      color: #A7A7A7;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      .right-text-item {
        cursor: pointer;
        &:last-child {
          margin-left: 60px;
        }
      }
    }
  }
  
  .screen {
    left: 50%;
    top: 50%;
    z-index: 99999;
    zoom: 1;
    opacity: 1; 
    transition: opacity .5s  ease-in; 
  }
  .hides {
      opacity: 0;
  }


</style>
